<template>
  <!-- <ContentWrap>
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="110px"
    >
      <el-form-item label="当前版本号" prop="currentVersion">
        <el-input
          v-model="queryParams.currentVersion"
          placeholder="请输入当前版本号"
          clearable
          @keyup.enter="handleQuery"
          class="!w-220px"
        />
      </el-form-item>
      <el-form-item label="最新版本号" prop="nowVersion">
        <el-input
          v-model="queryParams.nowVersion"
          placeholder="请输入最新版本号"
          clearable
          @keyup.enter="handleQuery"
          class="!w-220px"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery" type="primary">搜索</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
  </ContentWrap> -->
  <!-- 列表 -->
  <ContentWrap>
    <div class="btnWrap">
      <div>
        <el-button type="primary" @click="dialogVisible = true">新增</el-button>
      </div>
    </div>
    <el-table 
      border 
      row-key="id" 
      :height="tableHeight" 
      v-loading="loading" 
      :data="list" 
    >
      <el-table-column 
        v-for="item, index in tableTitleList"
        :key="index" 
        :min-width="item.width" 
        :header-align="item.headerAlign" 
        :align="item.align" 
        :label="item.label" 
        :prop="item.field" 
      >
        <template #default="scope">
          <div v-if="item.field === 'createTime'">
            {{ formatDate(scope.row.createTime) }}
          </div>
          <div v-else>
            {{ scope.row[item.field] }}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>

  <!-- 新增 -->
  <el-dialog v-model="dialogVisible" width="40%" title="新增版本号">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="110px"
      v-loading="formLoading"
    >
      <el-form-item label="最新版本号" prop="nowVersion" >
        <el-input v-model="formData.nowVersion" placeholder="请输入最新版本号" />
      </el-form-item>
      <el-form-item label="app文件" prop="file">
        <UploadFile
          style="width: auto"
          v-model="formData.fileList"
          :isShowTip="false"
          :limit="1"
          :fileType="['apk', 'wgt']"
          :fileSize="200"
          @update:modelValue="uploadFile"
        />
      </el-form-item>
      <el-form-item label="备注" prop="remark" >
        <el-input v-model="formData.remark" placeholder="请输入备注" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="AppVersion">
import * as AppVersionApi from '@/api/system/appVersion'
import { formatDate } from '@/utils/formatTime'

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  currentVersion: null,
  nowVersion: null
})
// const queryFormRef = ref() // 搜索的表单

const tableTitleList = [
  {
    width: '200px',
    headerAlign: 'left',
    align: 'left',
    label: '当前版本号',
    field: 'currentVersion'
  },
  {
    width: '200px',
    headerAlign: 'left',
    align: 'left',
    label: '最新版本号',
    field: 'nowVersion'
  },
  {
    width: '200px',
    headerAlign: 'left',
    align: 'left',
    label: '下载地址',
    field: 'file'
  },
  {
    width: '200px',
    headerAlign: 'left',
    align: 'left',
    label: '备注',
    field: 'remark'
  },
  {
    width: '200px',
    headerAlign: 'left',
    align: 'left',
    label: '创建时间',
    field: 'createTime'
  },
] // 表头列表
const tableHeight = ref(0)
const loading = ref(false)
const list = ref([])
const total = ref(0)
const dialogVisible = ref(false)
const formLoading = ref(false)
const formData = ref({
  id: 1,
  nowVersion: undefined,
  file: undefined,
  remark: undefined,
  fileList: []
})
const formRules = reactive({
  nowVersion: [{ required: true, message: '最新版本号不能为空', trigger: 'change' }],
  file: [{ required: true, message: 'app文件不能为空', trigger: 'change' }],
})

// 获取数据
const getList = async () => {
  loading.value = true
  try {
    const res = await AppVersionApi.getAppVersionPage(queryParams)
    list.value = res.list
    total.value = res.total
  } finally {
    loading.value = false
  }
}

// 新增
const submitForm = async () => {
  console.log(formData.value)
  formLoading.value = true
  try {
    await AppVersionApi.updateAppVersion(formData.value)
    dialogVisible.value = false
    getList()
  } finally {
    formLoading.value = false
  }
}

// 上传app
const uploadFile = (data) => {
  if (JSON.parse(data).length) {
    const res = JSON.parse(data)
    formData.value.file = res[0].url
  } else {
    formData.value.file = ''
  }
}

/** 搜索按钮操作 */
// const handleQuery = () => {
//   queryParams.pageNo = 1
//   getList()
// }

/** 重置按钮操作 */
// const resetQuery = () => {
//   queryFormRef.value.resetFields()
//   handleQuery()
// }

/** 初始化 **/
onMounted(async () => {
  // const queryParamsHeight = queryFormRef.value.$el.clientHeight + 2
  tableHeight.value = document.body.clientHeight - 132 - 117
  getList()
})
</script>
<style lang="scss" scoped>
  .btnWrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
</style>
